/**
 * colorPickerProvider module
 */

 var storage = require("../../utils/storage");
 function colorPickerProvider(element, callback){
     this.element = element;
     this.callback = callback;
     this.container = $('<div class="color-colorpicker"></div>');
     this.container.insertAfter(element);
     this.element.on('focus blur', function (ev){
         this.container.toggle(ev.type === 'focus');
         this.setColorFromModel();
     }.bind(this));
     this.iframe = this.getIframe();
     this.iframe.appendTo(this.container);
     this.iframe.on('load', function (){
         this.colorpicker = this.iframe[0].contentWindow.colorpicker;
         this.bindColorpickerEvents();
         this.setColorFromModel();
     }.bind(this));
 };
 colorPickerProvider.prototype = {
     getIframe: function (){
         return $('<iframe>').attr({
             src: storage.data.CONST.urls.colorpicker,
             width: '120',
             height: '110',
             frameborder: 0,
             allowtransparency: 1
         });
     },
     bindColorpickerEvents: function (){
         this.element.on('keyup change', this.setColorFromModel.bind(this));
         this.colorpicker.onColorChange = function (color){
             color = color.substr(1, 6).toUpperCase();
             this.element.val(color).change();
             this.callback && this.callback(color);
         }.bind(this);
     },
     setColorFromModel: function (){
         var color = this.getModelColor();
         if (this.container.is(':visible') && color){
             if (color !== this.colorpicker.color().toUpperCase()){
                 this.colorpicker.color(color);
             }
         }
     },
     getModelColor: function (){
        //  if (this.$scope.property.color){
        //      return '#' + this.$scope.property.color;
        //  }
     }
 };

 module.exports = colorPickerProvider;
